<template>
	<view class="my-add-path">
		<view class="path-item">
			<view>收 件 人</view>
			<input type="text" v-model="pathObj.name" placeholder="收件人姓名">
		</view>
		<view class="path-item">
			<view>手机号</view>
			<input type="text" v-model="pathObj.tel" placeholder="11位手机号" maxlength="11">
		</view>
		<view class="path-item">
			<view>所在地区</view>
			<view class="">
				<uni-data-picker :localdata="cityData" :placeholder="pathObj.city" popup-title="请选择地址" :clear-icon="false" @change="onchange">
				</uni-data-picker>
			</view>
		</view>
		<view class="path-item">
			<view>详细地址</view>
			<input type="text" v-model="pathObj.details" placeholder="5到60个字符" maxlength="60">
		</view>
		<view class="path-item">
			<view>设为默认地址</view>
			<label class="radio">
				<radio value="" :checked="pathObj.isDefault" color="#ff3333" @tap="changeDefault" /><text></text>
			</label>
		</view>
	</view>
</template>

<script>
	import cityData from "@/common/cityData/cityData.js"
	export default {
		data() {
			return {
				cityData,
				pathObj: {
					city: '',
					details: '',
					name: '',
					tel: '',
					isDefault: false
				},
				i:-1,
				//是否修改
				isStatus: false
			};
		},
		onLoad(e) {
			//修改地址
			if (e.data) {
				uni.setNavigationBarTitle({
					title:"修改地址"
				})
				let data = JSON.parse(e.data)
				this.pathObj = data.item
				this.i = data.index
				this.isStatus = true
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.float === "right") {
				//判断数据是否为空
				for (let key in this.pathObj) {
					if (this.pathObj[key] === '') {
						uni.showToast({
							title: "请填写完整的信息",
							icon: "none"
						})
						return
					}
				}
				if(this.isStatus){
					//修改地址
					this.$store.commit("updatePath",{
						index:this.i,
						item:this.pathObj
					})
				}else{
					//新增数据
					this.$store.commit("addPath", this.pathObj)
				}
				//跳转地址管理
				uni.navigateBack({
					delta: 1
				})
			}
		},
		methods: {
			onchange(e) {
				let cityDataArr = e.detail.value
				this.pathObj.city = ''
				cityDataArr.forEach(v => {
					this.pathObj.city += v.text
				})
			},
			changeDefault() {
				this.pathObj.isDefault = !this.pathObj.isDefault
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-add-path {
		padding: 0 30rpx;

		.path-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			width: 100%;
			border-bottom: 2rpx solid #ccc;

			input {
				flex: 1;
				text-align: left;
				padding-left: 20rpx;
			}
		}
	}
</style>
